import React from 'react'
/*
  函数组件的事件绑定
  1、事件绑定1，在JSX中完成事件处理操作，这种操作的坏处就是代码结构比较混乱
  2、事件绑定2，在JSX中调用函数组件中的函数，这种操作应用于不传递参数的情况
  3、事件绑定3，在JSX中调用函数组件中的函数，进行传参
*/
export default function EventsBindFunComponent() {
  /* 编写一个箭头函数*/
  const bindClick=()=>{
    console.log('事件绑定2的处理函数执行了');
  }
  const bindClick2=(arg1,arg2)=>{
    console.log('事件绑定3，参数为',arg1,arg2);
  }
  return (
    <div>
        <h1>函数组件的事件绑定</h1>
        <button onClick={()=>{
           console.log('事件绑定1的处理操作')
        }}>事件绑定1</button>
        <button onClick={bindClick}>事件绑定2</button>
        <button onClick={(e)=>{bindClick2('giles',e)}}>事件绑定3</button>
    </div>
  )
}
